<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			ul {
				padding: 0;
				border: 1px solid green;
				height: 500px;
				float: left;
				width: 250px;
				list-style: none;
				text-align: left;
			}
			
			#list2 {
				margin-left: 30px;
			}
			
			#list1 {
				position: relative;
			}
			
			.item {
				margin: 10px;
				text-align: center;
			}
			
			.add {
				position: absolute;
				bottom: 6px;
				left: 6px;
			}
			
			.margin-left-30 {
				margin-left: 30px;
			}
		</style>
	</head>

	<body>
		<div class="list-box">
			<ul id="list1">

				<li class="add">
					<input value="asdfasdfas" id="inp" placeholder="请输入选项" onkeypress="enter();"/>
					<button onclick="add();">添加选项</button></li>
			</ul>
			<ul id="list2">

			</ul>
		</div>
	</body>

</html>

<script type="text/javascript">
	// 1.获取输入的内容
	var inp = document.getElementById('inp');
	var list1 = document.getElementById('list1');
	var list2 = document.getElementById('list2');

	function add() {
		var li = document.createElement('li');
		var text = inp.value;
		if (!text) {
			alert('请输入选项');
			return false;
		}
		li.className = 'item';
		li.innerHTML = 
				`<span>${text}</span>
					<button onclick="move();" class="margin-left-30">-></button>
				`;
		// 把li添加到列表区
		list1.appendChild(li);
		// inp.value = '';
	}
	
	function enter() {
		console.log(event.keyCode);
		if (event.keyCode === 13) {
			add();
		}
	}
	
	function move() {
		// 获取点击的按钮元素
		var button = event.target;
		// 获取父元素li
		var li = button.parentNode;
		button.remove();
		list2.appendChild(li);
	}
</script>